<template>
  <!-- <SketchRule/> -->
  <div class="simba-edit">
    <h1>Hell1213o</h1>
    <EditShapeBox class="simba-edit-box" :style="{
        left: `${item.left}px`,
        top: `${item.top}px`,
        width: `${item.width}px`,
        height: `${item.height}px`,
        backgroundColor: item.backgroundColor,
        cursor: item.cursor,
      }" 
      v-for="item in list" :key="item.id" 
      @mousedown="mouseDownHandle($event, item)"
    >
      <div>{{ item.left }}/{{ item.top }}</div>
    </EditShapeBox>
  </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { ref } from 'vue'
import { EditShapeBox } from "./EditShapeBox";
import { useMouseHandle } from './hooks/useDrag.hook'
import Loading from '@/components/Loading/Loading.vue';
import  SketchRule  from 'vue3-sketch-ruler'
const asyncHome = defineAsyncComponent({
  loader: () => import('@/views/Home/Home.vue'),
  delay: 10,
  timeout: 3000,
  loadingComponent: Loading,
})
const { mouseDownHandle } = useMouseHandle()
const list = ref([
  {
    id: 1,
    name: 'test',
    left: 0,
    top: 0,
    width: 400,
    height: 200,
    backgroundColor: '#ccc',
    border: '1px solid #fff',
    cursor: 'move',
    zIndex: 1,
    transform: 'translate(0, 0)'
  }
])
</script>
<style scoped lang="scss">
.simba-edit {
  width: 1920px;
  height: 1080px;
  transform: scale(0.5);
  background-color: #232324;
  position: relative;

  h1 {
    color: #fff;
  }

  .simba-edit-box {
    position: absolute;
  }
}
</style>